<template>
    <div>
        <div class="main" ref="main"></div>
    </div>
</template>

<script>
    import * as echarts from "echarts";

    export default {
        name: "EchartsDataView",
        data() {
            return {
                myChart: null,
                option:  {
                    //提示框取默认值，即鼠标移动到图会显示内容
                    tooltip: {
                        trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据
                        axisPointer: {  //坐标轴指示器，坐标轴触发有效，
                            type: 'cross',  //默认为line，line直线，cross十字准星，shadow阴影
                            lineStyle: {
                                color: '#2b4ac8'
                            },
                            crossStyle: {
                                color: '#ff6700'
                            },
                            shadowStyle: {
                                color: "#b0b0b0",
                                opacity : 0.5
                            }
                        }
                    },
                    legend: {
                        // Try 'horizontal vertical'
                        orient: 'horizontal',
                        left : 'center',
                        top: 10,
                        backgroundColor: '#333',
                        textStyle: {
                            color: '#fff'
                        },
                        // icon: 'rect'
                    },
                    xAxis: [
                        {
                            type: 'category', // 坐标轴类型，值category/value，与y轴呼应，若x轴配置category则y轴配置value
                            position: 'bottom',    // x轴的位置（top/bottom）
                            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                            //【轴线相关配置】
                            axisLine : {
                                show : true,   // 是否显示刻度标签
                                symbol: ['none', 'none'], //轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
                                symbolSize: [20, 15],     // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
                                lineStyle: {
                                    color: '#333',    // 坐标轴线线的颜色
                                    width: '1',    // 坐标轴线线宽
                                    type: 'solid',    // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
                                },
                            },
                        }
                    ],
                    yAxis : [
                        {
                            type: 'value',
                            name: '降水量',
                            min: 0,
                            max: 250,
                            position: 'right',

                            //【刻度相关配置】
                            axisTick: {
                                show : false, // 是否显示坐标轴刻度
                                lineStyle: {
                                    type: 'dashed'
                                }
                            },
                            //【刻度标签相关配置】
                            axisLabel : {
                                show : true,  // 是否显示刻度标签
                                inside : false, //刻度标签是否朝内，默认朝外
                                rotate : 0, // 旋转的角度从 -90 度到 90 度
                                margin : 8, // 刻度标签与轴线之间的距离
                                // formatter : '{value} ml',  // 支持模板字符串
                                formatter : function (value,index) {
                                    return value+" ml"
                                },
                                textStyle: {
                                    color: function (value, index) {
                                        return value >= 150 ? 'red' : 'green';
                                    }
                                }
                            }
                        },
                        {
                            type: 'value',
                            name: '温度',
                            min: 0,
                            max: 25,
                            position: 'left',
                            axisLabel : {
                                formatter : '{value} ℃'
                            }
                        }
                    ],
                    series : [
                        {
                            name : "平均降水量",
                            type: 'bar',
                            yAxisIndex : 0,  //数据应用在y轴的第一个配置的坐标
                            data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
                        },
                        {
                            name : "平均温度",
                            type: 'line',
                            smooth : true,
                            yAxisIndex : 1,  //数据应用在y轴的第二个配置的坐标
                            data: [6.0, 10.2, 10.3, 11.5, 10.3, 13.2, 14.3, 16.4, 18.0, 16.5, 12.0, 5.2]
                        }
                    ]
                }
            }
        },
        mounted(){
            this.myChart = echarts.init(this.$refs.main);
            this.myChart.setOption(this.option)
        }
    }
</script>

<style scoped>
    .main {
        width: 60vw;
        height: 550px;
        box-shadow: 1px 1px 10px #333;
        margin: 20px auto;
    }
</style>